<template>
  <el-container>
    <!--查询条件开始-->
    <el-header height="1">
      <venus-form :venus-form-items="venusFormItems.queryForm" :parms-value="parmsValue.queryForm" :form="form" />
    </el-header>
    <!--查询条件结束-->

    <!--列表开始-->
    <el-main>
      <table-pagination
        :table-data="table.userPort.tableData"
        :table-header-config="table.tableHeaderConfig"
        :total="table.userPort.total"
        :page-size="table.userPort.limit"
        :now-page="table.userPort.nowPage"
        :operation-config="table.operationConfig"
        @current-change="currentChange"
      />
    </el-main>
    <!--列表结束-->
  </el-container>
</template>

<script>
  import { formFuncs, formItems } from '@/utils/formItems'
  import * as kk from '@/utils/k-utils'

  export default {
    data() {
      return {
        table: {
          tableHeaderConfig: [
            formItems.orgName, formItems.loginName, formItems.userName, formItems.orgname
          ],
          operationConfig: {
            fixed: 'left', width: 220, operationButton: [
              {
                value: '管理投组', func: (params) => {
                  this.$router.push({
                    path: '/portfolio_setting_manager',
                    query: { userid: params.userid, username: params.username }
                  })
                }
              },
              { value: '详情', func: params => this.detailDialog(params) }
            ]
          },
          userPort: { tableData: [], exeid: 'M8213EQ101', total: 100, limit: 10, nowPage: 1 }
        },
        form: {
          labelWidth: 0,
          button: [
            { name: '查询', type: 'success', click: params => this.loadTable(params.username, params.loginname) },
            {
              name: '重置', type: 'reset', click: () => {
                // eslint-disable-next-line no-return-assign
                Object.keys(this.parmsValue).forEach(key => this.parmsValue[key] = '')
              }
            }
          ]
        },
        parmsValue: { queryForm: { username: '', loginname: '', name: '' },
                      detailForm: { name: '', loginname: '' }
        },
        venusFormItems: { queryForm: [formItems.loginName, formItems.userName], detailForm: [] }
      }
    },
    // 生命周期开始
    beforeMount() {
      this.loadTable()
    },
    // 生命周期结束
    methods: {
      /**
       * 加载表格数据
       * @param username
       * @param loginname
       */
      loadTable(username, loginname) {
        this.table.userPort.username = username
        this.table.userPort.loginname = loginname
        kk.k_load_table(this, 'userPort', formItems.PUBLIC)
      },

      /**
       * 显示详情弹窗
       * @param row
       */
      detailDialog(row) {
        this.parmsValue.detailForm = row

        kk.k_load_exeid(formItems.PUBLIC, 'M8213EQ104', { userid: row.userid }).then(resp => {
          this.venusFormItems.detailForm = [
            formFuncs.withProperty(formItems.loginName, formItems.DISABLE),
            formFuncs.createCheckBox('投组名称', 'name', resp.rows.map(obj => {
              return { label: obj.port_name, Itemname: obj.port_name, checked: true, disabled: true }
            }))
          ]

          this.DialogForm({
            title: '用户投组信息详情',
            venusFormItems: this.venusFormItems.detailForm,
            parmsValue: this.parmsValue.detailForm
          })
        })
      },

      /**
       * 页数监听
       * @param index
       */
      currentChange(index) {
        this.table.userPort.nowPage = index
        this.loadTable()
      }

    }
  }
</script>
